<template>
  <ContentWrap>
    <span style="font-weight: bold;margin-top: 0;">{{ query.projectName }}</span>
  </ContentWrap>

  <el-tabs type="border-card" v-model="activeName">
    <el-tab-pane label="模板字段" name="module">
      <!-- 列表 -->
      <ContentWrap>
        <!-- 搜索工作栏 -->
        <el-form ref="queryFormRef" :inline="true" :model="queryParams" class="-mb-15px">
          <el-form-item label="字段名称" prop="fieldName">
            <el-input v-model="queryParams.fieldName" placeholder="请输入字段名称" clearable @keyup.enter="handleQuery"
              class="!w-240px" />
          </el-form-item>
          <el-form-item label="使用场景" prop="useScene">
            <el-select v-model="queryParams.useScene" placeholder="请选择使用场景" class="!w-240px" clearable>
              <el-option v-for="item in cjList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="字段类型" prop="fieldType">
            <el-select v-model="queryParams.fieldType" placeholder="请选择字段类型" class="!w-240px" clearable>
              <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleQuery">
              <Icon class="mr-5px" icon="ep:search" />
              搜索
            </el-button>
            <el-button @click="resetQuery">
              <Icon class="mr-5px" icon="ep:refresh" />
              重置
            </el-button>
            <el-button plain type="primary" @click="openForm('create')" v-if="editePermission">
              <Icon class="mr-5px" icon="ep:plus" />
              新增字段
            </el-button>
          </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true">
          <el-table-column align="center" label="字段名称" prop="fieldName" />
          <el-table-column align="center" label="使用场景" prop="useSceneName" />
          <el-table-column align="center" label="字段类型" prop="fieldTypeName" />
          <el-table-column align="center" label="字段备注" prop="fieldNotes" />
          <el-table-column align="center" label="系统字段" prop="systemField" />
          <el-table-column :formatter="dateFormatter" align="center" label="创建时间" prop="createTime" />
          <el-table-column :formatter="dateFormatter" align="center" label="更新时间" prop="updateTime" />
          <el-table-column :width="300" align="center" label="操作" v-if="viewPermission">
            <template #default="scope">
              <el-button link type="primary" @click="openForm('view', scope.row.id)"> 查看
              </el-button>
            </template>
          </el-table-column>
          <el-table-column :width="300" align="center" label="操作" v-else>
            <template #default="scope">
              <el-button link type="primary" @click="openForm('update', scope.row.id)" :disabled="!editePermission"> 编辑
              </el-button>
              <el-button link type="primary" @click="openForm('copy', scope.row.id)"
                :disabled="!editePermission || scope.row.systemField === '是'"> 复制
              </el-button>
              <el-button link type="danger" @click="handleDelete(scope.row.id, scope.row.fieldName)"
                :disabled="!editePermission || scope.row.systemField === '是'"> 删除 </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <Pagination v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNo" :total="total"
          @pagination="getList" />
      </ContentWrap>
    </el-tab-pane>
  </el-tabs>

  <!-- 表单弹窗：添加/修改 -->
  <ModuleForm ref="formRef" @success="getList" />
  <!-- 删除确认弹窗 -->
  <DeleteForm ref="deleteFormRef" @success="getList" />
</template>

<script setup lang="ts">
defineOptions({ name: 'Module' })
import * as ProjectApi from '@/api/project'
import ModuleForm from './ModuleForm.vue'
import DeleteForm from './DeleteForm.vue'
const activeName = ref('module')
import { dateFormatter } from '@/utils/formatTime'
const { currentRoute } = useRouter() // 路由对象
const { query } = unref(currentRoute)
const loading = ref(false) // 列表的加载中
const list = ref([{ name: 'a' }] as any) // 列表的数据
const total = ref(0) // 列表的总页数
const queryFormRef = ref()
const queryParams = reactive({
  projectId: query.projectId,
  fieldName: '',
  fieldType: '',
  useScene: '',
  pageNo: 1,
  pageSize: 10,
})
const typeList = ref([{ label: '单选下拉列表', value: '1' }, { label: '多选下拉列表', value: '2' }])
const cjList = ref([{ label: '需求模板', value: '1' }, { label: '用例模板', value: '2' }, { label: '缺陷模板', value: '3' }])
const role = ref('')
const editePermission = computed(() => ['admin'].includes(role.value))
const viewPermission = computed(() => ['projectManager', 'developer', 'testManager', 'tester'].includes(role.value))
// 获取人员在项目中角色
const getProjectMemberRole = async () => {
  let data = await ProjectApi.getProjectMemberRole({ projectId: query.projectId })
  role.value = data
}
/** 添加修改操作 */
const formRef = ref()
const deleteFormRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}
/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}
/**
 * 查询字段列表
 * */
const getList = async () => {
  loading.value = true
  try {
    const data = await ProjectApi.getProjectModuleList(queryParams)
    list.value = data.records
    total.value = data.total
  } finally {
    loading.value = false
  }
}
/**
 * 删除操作
 * */
const handleDelete = (id, content) => {
  deleteFormRef.value.open(id, content)
}
onMounted(() => {
  getList()
  getProjectMemberRole()
})
</script>

<style scoped></style>
